<template>
  <div class="Enterprise">
    <!-- <p>{{ entinfo.introduction }}</p> -->
    <BasicCompany :category="traditionalCategory" />
    <CorporatePortrait style="margin-top: -40px" />
    <Product style="margin-top: 20px" />
    <!-- <CompanyInfo /> -->

    <!-- 列表 -->
    <div class="tab_list wh-1200">
      <div class="tab_bar">
        <div class="item_list_containt">
          <div
            @click="SwitchTable(1)"
            class="item_tab"
            :class="TableIndex == 1 ? 'item_tab_active' : ''"
          >
            基础信息
          </div>
        </div>
        <!-- <div class="item_list_containt">
          <div
            @click="SwitchTable(2)"
            class="item_tab"
            :class="TableIndex == 2 ? 'item_tab_active' : ''"
          >
            行政处罚信息
          </div>
        </div> -->
        <!-- <div class="item_list_containt">
          <div @click="SwitchTable(3)" class="item_tab" :class="TableIndex == 3 ? 'item_tab_active' : ''">
            招商公告
          </div>
        </div>
        <div class="item_list_containt">
          <div @click="SwitchTable(4)" class="item_tab" :class="TableIndex == 4 ? 'item_tab_active' : ''">
            招标公告
          </div>
        </div> -->
      </div>

      <div class="tab_box_main mt-16">
        <div class="ent_Business">
          <!-- 企业信息 -->
          <CompanyInfo
            v-show="TableIndex == 1"
            :category="traditionalCategory"
          />
          <!-- 变更信息 -->
          <UpdateHistory
            :category="traditionalCategory"
            v-show="TableIndex == 1"
          />
          <!-- 商标注册信息 -->
          <Trademark v-show="TableIndex == 1" />
          <!-- 著作权信息 -->
          <Copyright v-show="TableIndex == 1" />
          <!-- 专利信息 -->
          <Patents v-show="TableIndex == 1" />
          <!-- 行政处罚信息 -->
          <Administrative v-show="TableIndex == 2" />
          <div class="tips" v-show="TableIndex == 1">
            以下信息由该企业提供，企业对其报送信息的真实性、合法性负责
            <i class="iconfont tips_icon icon-xialajiantou"></i>
          </div>

          <!-- 资质信息 -->
          <Qualifications v-show="TableIndex == 1" />
          <!-- 荣誉资质 -->
          <Honor v-show="TableIndex == 1" ref="HAInfo" />
          <!-- 招商公告 -->
          <!-- <Investment v-show="TableIndex == 3" /> -->
          <!-- 招标公告 -->
          <!-- <Tenders v-show="TableIndex == 4" /> -->
        </div>
      </div>
    </div>
    <a-modal
      class="ZZ-box"
      v-model="ZZDetailsshow"
      :title="ZZList.certName"
      @ok="handleOk"
    >
      <ul>
        <li>
          证书名称：<span>{{ ZZList.certName }}</span>
        </li>
        <li>
          证书编号：<span>{{ ZZList.certNo }}</span>
        </li>
        <li>
          发证机构名称：<span>{{ ZZList.certOrgName }}</span>
        </li>
        <li>
          发证日期：<span>{{ ZZList.certDate }}</span>
        </li>
        <li>
          证书有效期：<span>{{ ZZList.certIndate }}</span>
        </li>
        <li>
          证书概述：<span>{{ ZZList.certSummary }}</span>
        </li>
        <li>
          证书图片：
          <viewer :images="ZZList.entCertFiles">
            <div class="clearfix">
              <div
                class="img-box f-left"
                v-for="(item, index) in ZZList.entCertFiles"
                :key="index"
              >
                <img :src="getImageUrl(item.fileUrl)" alt="" />
              </div>
            </div>
          </viewer>
        </li>
      </ul>
      <template slot="footer">
        <a-button type="primary" @click="handleOk">关闭</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import BasicCompany from "./components/BasicCompany.vue";
import CorporatePortrait from "./components/CorporatePortrait.vue";
import Product from "./components/Product.vue";
import CompanyInfo from "./components/CompanyInfo.vue";
import UpdateHistory from "./components/UpdateHistory.vue";
import Trademark from "./components/Trademark.vue";
import Copyright from "./components/Copyright.vue";
import Patents from "./components/Patents.vue";
import Administrative from "./components/Administrative.vue";
import Qualifications from "./components/Qualifications.vue";
import Honor from "./components/Honor.vue";
import Investment from "./components/Investment.vue";
import Tenders from "./components/Tenders.vue";
import {
  getentBaseInfo,
  getEntChangePageList,
  getEntBrandPageList,
  getEntCopyrightPageList,
  getEntPatentPageList,
  getEntPenaltyPageList,
  getEntZZPageList,
  getEntEntHonorPageList,
  getEntHX,
  attentionEnt,
  getAttentionTotalByObjId,
  getIsAttentionEnt,
  getEntCertById,
} from "@/apis/EntBase";

import { getDicts } from "@/apis/system";
import { getClientUseCompanyInfo } from "@/apis/com/company";

import { getentMerchantsList } from "@/apis/EntMerchants";

import echarts from "echarts";
import { getToken } from "@/utils/auth";
import { getList } from "@/apis/productProvide";
import store from "@/store";
import { isLogin } from "@/utils";
export default {
  components: {
    BasicCompany,
    CorporatePortrait,
    Product,
    CompanyInfo,
    UpdateHistory,
    Trademark,
    Copyright,
    Patents,
    Administrative,
    Qualifications,
    Honor,
    Investment,
    Tenders,
  },
  data() {
    return {
      HXdata: {},
      entId: "",
      TableIndex: 1,
      entinfo: {}, //企业基本信息

      ZSform: {
        type: 1, //1招商，2招标
        size: 10,
        keyword: "",
        isOrderDesc: true,
        current: 1,
        auditStatus: 2,
        total: 0,
      },

      ZBform: {
        type: 2, //1招商，2招标
        size: 10,
        keyword: "",
        isOrderDesc: true,
        current: 1,
        auditStatus: 2,
        total: 0,
      },
      ZZDetailsshow: false,
      ZZList: [],

      traditionalCategory: [],
    };
  },
  mounted() {
    this.getTraditionalCategory();
    setTimeout(() => {
      // this.drawLine();
    }, 10);
    // this.getAttentionTotalByObjId();
    // this.getRouterData()
  },
  methods: {
    /**
     * 获取行业类别
     */
    async getTraditionalCategory() {
      const { data } = await getDicts("traditional_categories");
      console.log("获取行业类别", data);
      this.traditionalCategory = data;
    },

    // 获取路由参数（锚点跳转）
    getRouterData() {
      let { anchor } = this.$route.query;
      if (anchor && anchor !== "") {
        this.$refs[anchor].scrollIntoView();
      }
    },
    handleOk(e) {
      console.log(e);
      this.ZZDetailsshow = false;
    },
    // 获取  企业名片数据
    getEntHX() {
      let _params = {
        id: this.entId,
      };
      getEntHX(_params)
        .then((res) => {
          if (res.code == 200) {
            this.HXdata = res.data;
          }
        })
        .catch((error) => {});
    },
    drawLine() {
      let _params = {
        id: this.entId,
      };
      getEntHX(_params)
        .then((res) => {
          console.log("企业名片");
          console.log(res);
          if (res.code == 200) {
            this.HXdata = res.data;
          }
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          var categories = [];
          var arrName = [
            "企业名片",
            "基本信息",
            "荣誉资质",
            "供需服务",
            "经营发展",
          ];
          for (var i = 0; i < 6; i++) {
            categories[i] = {
              name: arrName[i] + i,
            };
          }
          var option = {
            // 图的标题
            title: {
              text: "",
            },
            // 提示框的配置
            tooltip: {
              formatter: function (x) {
                return x.data.des;
              },
            },
            // 工具箱
            toolbox: {
              // 显示工具箱
              show: false,
              feature: {
                mark: {
                  show: false,
                },
                // 还原
                restore: {
                  show: false,
                },
                // 保存为图片
                saveAsImage: {
                  show: false,
                },
              },
            },
            legend: [
              // {
              // selectedMode: 'single',
              // data: categories.map(function (a) {
              //   return a.name;
              // }),
              // },
            ],
            series: [
              {
                type: "graph", // 类型:关系图
                layout: "force", //图的布局，类型为力导图
                symbolSize: 40, // 调整节点的大小
                roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                edgeSymbol: ["circle", "arrow"],
                color: [
                  "#2a51bc",
                  "#188af1",
                  "#ee6224",
                  "#e9284f",
                  "#ff9f00",
                  "#0da9b0",
                ],
                edgeSymbolSize: [2, 10],
                edgeLabel: {
                  normal: {
                    textStyle: {
                      fontSize: 20,
                    },
                  },
                },
                force: {
                  repulsion: 400,
                  edgeLength: [10, 50],
                },
                draggable: true,
                lineStyle: {
                  normal: {
                    width: 4,
                    color: [
                      "#2a51bc",
                      "#188af1",
                      "#ee6224",
                      "#e9284f",
                      "#ff9f00",
                      "#0da9b0",
                    ],
                  },
                },
                edgeLabel: {
                  normal: {
                    show: true,
                    formatter: function (x) {
                      return x.data.name;
                    },
                  },
                },
                label: {
                  normal: {
                    show: true,
                    textStyle: {},
                  },
                },
                // 数据
                data: [
                  {
                    name: "企业名片",
                    des: "企业名片",
                    symbolSize: 80,
                    category: 0,
                  },
                  {
                    name: "基本信息",
                    symbolSize: 60,
                    category: 1,
                  },
                  {
                    name: "荣誉资质",
                    symbolSize: 60,
                    category: 1,
                  },
                  {
                    name: "成立年限",
                    des: "成立年限",
                    symbolSize: 60,
                    category: 2,
                  },
                  {
                    name: "注册资金",
                    des: "注册资金",
                    symbolSize: 60,
                    category: 2,
                  },
                  {
                    name: "变更记录",
                    des: "变更记录",
                    symbolSize: 60,
                    category: 2,
                  },

                  {
                    name: "资质证书",
                    symbolSize: 60,
                    category: 2,
                  },
                  {
                    name: "年度纳税大户",
                    symbolSize: 60,
                    category: 2,
                  },
                  {
                    name: "荣誉信息",
                    symbolSize: 60,
                    category: 2,
                  },
                  {
                    name: "知识产权",
                    symbolSize: 60,
                    category: 1,
                  },

                  {
                    name: "商标",
                    des: "商标",
                    symbolSize: 60,
                    category: 2,
                  },
                  {
                    name: "专利",
                    des: "专利",
                    symbolSize: 60,
                    category: 2,
                  },
                  {
                    name: "著作权",
                    des: "著作权",
                    symbolSize: 60,
                    category: 2,
                  },
                  {
                    name: "供需服务",
                    des: "供需服务",
                    symbolSize: 60,
                    category: 3,
                  },

                  {
                    name: "产品需求数",
                    symbolSize: 60,
                    category: 3,
                  },
                  {
                    name: "产品供应数",
                    symbolSize: 60,
                    category: 3,
                  },
                  {
                    name: "对接数",
                    symbolSize: 60,
                    category: 3,
                  },

                  {
                    name: "经营发展",
                    des: "经营发展",
                    symbolSize: 60,
                    category: 1,
                  },
                  {
                    name: "进行中项目",
                    symbolSize: 60,
                    category: 2,
                  },
                  {
                    name: "已完成项目",
                    symbolSize: 60,
                    category: 3,
                  },
                ],

                links: [
                  {
                    source: "企业名片",
                    target: "基本信息",
                    name: "",
                  },
                  {
                    source: "基本信息",
                    target: "成立年限",
                    name: "",
                  },
                  {
                    source: "基本信息",
                    target: "注册资金",
                    name: res.data.regCap,
                  },
                  {
                    source: "基本信息",
                    target: "变更记录",
                    name: res.data.entChangeCnt,
                  },
                  {
                    source: "企业名片",
                    target: "知识产权",
                    name: "",
                  },
                  {
                    source: "知识产权",
                    target: "商标",
                    name: res.data.brandCnt,
                  },
                  {
                    source: "知识产权",
                    target: "专利",
                    name: res.data.patentCnt,
                  },
                  {
                    source: "知识产权",
                    target: "著作权",
                    name: res.data.copyrightCnt,
                  },
                  {
                    source: "企业名片",
                    target: "荣誉资质",
                    name: "",
                  },
                  {
                    source: "荣誉资质",
                    target: "资质证书",
                    name: res.data.entCertCnt,
                  },
                  {
                    source: "荣誉资质",
                    target: "年度纳税大户",
                    name: res.data.largeTaxpayer ? res.data.largeTaxpayer : 0,
                  },
                  {
                    source: "荣誉资质",
                    target: "荣誉信息",
                    name: res.data.entHonorCnt,
                  },

                  {
                    source: "企业名片",
                    target: "供需服务",
                    name: "",
                  },
                  {
                    source: "供需服务",
                    target: "产品需求数",
                    name: res.data.materialsCnt ? res.data.materialsCnt : 0,
                  },
                  {
                    source: "供需服务",
                    target: "对接数",
                    name: res.data.productSaleCnt ? res.data.productInfoCnt : 0,
                  },
                  {
                    source: "供需服务",
                    target: "产品供应数",
                    name: res.data.productInfoCnt ? res.data.productInfoCnt : 0,
                  },
                  {
                    source: "供需服务",
                    target: "产品对接数",
                    name: res.data.productSaleCnt,
                  },

                  {
                    source: "企业名片",
                    target: "经营发展",
                    name: "",
                  },

                  {
                    source: "经营发展",
                    target: "招商合作",
                    name: res.data.merchantsCnt,
                  },
                  {
                    source: "经营发展",
                    target: "招标采购",
                    name: res.data.biddingCnt,
                  },
                ],

                categories: categories,
              },
            ],
          };
          myChart.setOption(option);
        })
        .catch((error) => {});
    },
    // 跳转到产品供应详情
    JumpProductDetails(id) {
      this.$router.push("/ProductContent?id=" + id);
    },

    SwitchTable(index) {
      this.TableIndex = index;
    },

    created() {
      this.entId = this.$route.query.id;
      // this.getEntChangePageList();
      // this.getEntHX();
      // setTimeout(() => {
      //   if (getToken()) {
      //     this.getIsAttentionEnt();
      //   }
      //   this.getEntPatentPageList();
      //   this.getEntCopyrightPageList();
      // }, 1500);
      // this.getEntBrandPageList();
      // this.getEntPenaltyPageList();
      // this.getEntZZPageList();
      // this.getEntEntHonorPageList();
      // this.getproductData();
    },
  },
};
</script>

<style lang="less" scoped>
.w {
  width: 1200px;
  margin: 0 auto;
}

.Enterprise {
  background-color: @bg-color-f5f;

  // tab
  .tab_list {
    padding-bottom: 156px;
    margin-top: 20px;

    .tab_bar {
      height: 76px;
      background-color: #ffffff;
      box-shadow: 0px 3px 10px 0px rgba(24, 138, 241, 0.16);
      border-top: 6px solid #2a51bc;

      .item_list_containt {
        text-align: center;
        display: inline-block;
        margin-top: 16px;
        margin-left: 16px;
        padding-right: 18px;
        position: relative;

        &::before {
          position: absolute;
          top: 5px;
          right: 0;
          width: 1px;
          height: 28px;
          content: "";
          background-color: #ddd;
        }

        &:nth-child(4) {
          &::before {
            width: 0px;
          }
        }
      }

      .item_tab {
        height: 40px;
        padding: 8px 16px;
        position: relative;
        border-radius: 8px;
        color: #909399;
        cursor: pointer;
      }

      .item_tab_active {
        background-color: #188af1;
        color: #fff;
      }
    }

    .tab_box_main {
      background-color: #ffffff;

      .ent_Business {
        padding: 24px;
        padding-bottom: 76px;

        .tips {
          position: relative;
          height: 51px;
          background-color: #188af1;
          font-size: 14px;
          letter-spacing: 0px;
          color: #ffffff;
          text-align: center;
          line-height: 51px;

          .tips_icon {
            position: absolute;
            bottom: -28px;
            left: 50%;
            transform: translate(-50%);
            color: #188af1;
            font-size: 20px;
          }
        }

        .title_box {
          border-bottom: solid 1px #ebeef5;

          .title {
            font-size: 16px;
            line-height: 14px;
            letter-spacing: 0px;
            color: #303133;
          }

          .line {
            width: 20px;
            height: 4px;
            background-color: #188af1;
            margin-top: 8px;
          }
        }

        table,
        tr,
        th,
        td {
          border: 1px solid #e4e7ed;
          border-collapse: collapse;
          line-height: 40px;
        }

        .ent_table {
          width: 100%;
          margin-top: 24px;

          .table_left {
            width: 196px;
            height: 38px;
            background-color: #f3f6fe;
            padding-left: 20px;
            color: #606266;
          }

          .ent_table_title {
            background-color: #fff;
            padding-left: 20px;
            color: #333333;
          }

          .text_area {
            line-height: 24px;
            padding: 16px 20px;
          }
        }
      }
    }
  }
}

/deep/html {
  overflow: auto;
}
</style>
